<template>
	<view class="content" :style="{background: `url(${imgPath}storage/home/home_bg.png)`}">
		<view class="box">
			<view class="goods">
				<view style="display: flex;flex-wrap: wrap;">
					<view class="item" v-for="item in productlist">
						<view class="item-box" @click="goProductdetails(item.product_id)">
							<view class="hot">
								<u--image :showLoading="true" :src="imgPath + 'storage/home/hot.png'" width="60rpx"
									height="44rpx"></u--image>
							</view>
							<view class="img">
								<u--image :showLoading="true" :src="item.product_img" width="212rpx"
									height="212rpx"></u--image>
							</view>
							<view class="text">
								<view class="title">
									{{item.product_name}}
								</view>
								<view class="pay">
									<view class="money">
										¥{{item.product_price}}
									</view>
									<u--image :showLoading="true" :src="imgPath + 'storage/home/shopping_cart.png'"
										width="40rpx" height="40rpx"></u--image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$store.state.user.baseURL,
				paging: {
					page: 1,
					limit: 12,
				},
				total: null,
				productlist: [],
				minisystemInfo: ''
			}
		},
		onLoad() {
			this.getProductList()
			uni.getStorage({
				key: 'minisystemInfo',
				success: (res) => {
					this.minisystemInfo = res.data
				}
			})
		},
		onShareAppMessage(e) {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let currentPage = routes[routes.length - 1].route;
			let shareobj = {
				title: this.minisystemInfo.sub_title, //分享的标题
				path: currentPage, //好友点击分享之后跳转的页面
				imageUrl: this.minisystemInfo.url, //内容图片
			}
			return shareobj //一定要返回对象
		},
		onReachBottom() {
			this.paging.page++
			this.getProductList("onReachBottom")
		},
		methods: {
			getProductList(type) {
				if (this.total == this.productlist.length) return
				this.$api.productlist(this.paging).then(res => {
					if (type == 'onReachBottom') {
						this.productlist = [...this.productlist, ...res.data.list]
					} else {
						this.productlist = res.data.list
					}
					this.total = res.data.total
				})
			},
			goProductdetails(id) {
				uni.navigateTo({
					url: '/subpackageB/productdetails/productdetails?id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx 0;
		z-index: -1;
		height: calc(100% - 40rpx);
	}

	.box {
		padding: 0 28rpx;
		padding-top: 10rpx;
	}

	.goods {
		min-height: 95vh;
		background: #FEF1DC;
		border-radius: 16rpx;
		padding: 16rpx;
		box-sizing: border-box;
	}

	.item {
		margin-bottom: 15rpx;
		width: 33.3%;
		height: 350rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;

		.item-box {
			position: relative;
			width: 212rpx;
			height: 350rpx;
			border-radius: 16rpx;
			border: 2rpx solid #E2C091;
			overflow: hidden;

			.hot {
				z-index: 99;
				position: absolute;
				top: 0;
				left: 0;
			}

			.text {
				box-sizing: border-box;

				.title {
					padding: 10rpx 16rpx;
					height: 70rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}

				.pay {
					height: 40rpx;
					padding: 0 16rpx;
					display: flex;
					justify-content: space-between;
				}

				.money {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #D06122;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}
</style>